import React, { useEffect, useState } from 'react';
import { Table, Modal,Button,Radio } from 'antd';
import type { TableProps } from 'antd';
import { getGroup, tag_search,upTag } from '../../../request/api'
import { useDispatch, useSelector } from 'react-redux';
import { setIsGroup, setLabelLook } from '../../../store/module/store';


const App: React.FC = () => {
  const dispatch = useDispatch()
  let label_look = useSelector((state: any) => state.storeList.label_look)
  let is_group = useSelector((state: any) => state.storeList.is_group) //数据判断刷新


  interface DataType {
    name: String,//标签名称
    level: Number,//等级
    statue: String,//状态
    describe: String,//描述
    color: String,//颜色
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '标签名称', dataIndex: '',
      render: (text: any) => <button
        style={{
          border: `1px solid ${text.color}`,
          padding: '0.1rem',
          color: `${text.color}`,
          backgroundColor: 'white'
        }}>{text.name}</button>,
    },
    { title: '状态', dataIndex: 'statue', },
    {
      title: '操作', dataIndex: '',
      render: (text: any) => <a onClick={() => { showModal(text) }}>编辑</a>,
    },
  ];


  const [group_label, setGroup_label] = useState([])

  useEffect(() => {
    get_group()
  }, [is_group])

  //获取分组
  const get_group = async () => {
    if (label_look) {
      let res = await tag_search({ label_look: label_look })
      setGroup_label(res.data)
      dispatch(setLabelLook(''))
    } else {
      let res = await getGroup({})
      setGroup_label(res.group_label)
    }
  }

  const dataSource = group_label.map((item: any) => ({
    key: item._id,
    name: item.name,//标签名称
    level: item.level,//等级
    statue: item.statue,//状态
    describe: item.describe,//描述
    color: item.color,//颜色
  }))

  //数据编辑
  const [box, setBox] = useState<any>([])
  const [ID,setID] = useState<any>('')
  //添加标签
  const [lobelName, setLobalName] = useState<string>('')
  const [describe, setDescribe] = useState<string>('')
  //弹出对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = (box: any) => {
    setIsModalOpen(true);
    setBox(box)
    setID(box.key)
    setLobalName(box.name)
    setDescribe(box.describe)
    setValue(box.color)
    setStatue_btn(box.statue)
  };
//确定添加标签 
  const handleOk = () => {
    if(lobelName==''||describe=='' || statue_btn=='' || value==''){
      return alert('请填写完整数据')
    }
    setIsModalOpen(false);
    addlobel()
  };
//取消添加标签
  const handleCancel = () => {
    setIsModalOpen(false);
    setValue('')
    setStatue_btn('')
    setLobalName('')
    setDescribe('')
  };

  //单选框
  const [value, setValue] = useState('');

  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  //添加标签状态
  const [statue_btn, setStatue_btn] = useState<string>('')
  const upStatue_btn = (value: any) => {
    setStatue_btn(value)
  }

//添加标签数据
const addlobel=async()=>{
  const res=await upTag({id:ID,name:lobelName,describe:describe, statue:statue_btn, color: value})
  if(res.code===200){
    handleCancel()
    dispatch(setIsGroup())
  }
}


  return (
    <div>
      <Table<DataType> columns={columns} dataSource={dataSource}
        pagination={{
          pageSize: 6,
          showQuickJumper: true,
          position: ['bottomLeft'],
        }}
      />
     <div>
        <Modal title="新建标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={[
            <Button key="submit" onClick={handleCancel}>
              取消
            </Button>,
            <Button key="back" type="primary" onClick={handleOk}>
              确定
            </Button>
          ]}
        >
          <div className='modal'>
            <p>名称： <input type="text" value={lobelName}
              onChange={(e) => {
                setLobalName(e.target.value)
              }} /></p>
            <p>描述： <input type="text" value={describe}
              onChange={(e) => {
                setDescribe(e.target.value)
              }} /></p>
            <div>
              <Radio.Group onChange={onChange} value={value}>
                <Radio value='red'><button style={{
                  border: '1px solid red',
                  color: 'red'
                }}>标签</button></Radio>
                <Radio value='blue'><button style={{
                  border: '1px solid blue',
                  color: 'blue'
                }}>标签</button></Radio>
                <Radio value='green'><button style={{
                  border: '1px solid green',
                  color: 'green'
                }}>标签</button></Radio>
                <Radio value='purple'><button style={{
                  border: '1px solid purple',
                  color: 'purple'
                }}>标签</button></Radio>
              </Radio.Group>
            </div>
            <p>状态：
              <button
                style={{
                  border: statue_btn == '启用' ? '1px solid red' : '',
                  color: statue_btn == '启用' ? 'red' : '',
                  fontSize: '0.3rem'
                }}
                onClick={() => {
                  upStatue_btn('启用')
                }}>启用</button>
              <button
                style={{
                  border: statue_btn == '禁用' ? '1px solid red' : '',
                  color: statue_btn == '禁用' ? 'red' : '',
                  fontSize: '0.3rem'
                }}
                onClick={() => {
                  upStatue_btn('禁用')
                }}>禁用</button>
            </p>
          </div>
        </Modal>
      </div>
    </div>
  )
}


export default App;